// ==UserScript==
// @name         ikanbot.com enhancer
// @namespace    https://git.oschina.net/yjbc/userscripts
// @version      1.0
// @description  优化视频线路选择交互
// @author       映阶碧草
// @match        *://ikanbot.com/*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        /* 隐藏原始线路列表 */
        .line-box {
            display: none !important;
        }

        /* 新版标签容器 */
        .tab-container {
            position: relative;
            margin: 20px 0;
        }

        .tab-buttons {
            display: flex;
            overflow-x: auto;
            gap: 8px;
            padding-bottom: 5px;
        }

        .tab-button {
            padding: 8px 16px;
            background: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: 0.3s;
        }

        .tab-button.active {
            background: #2196F3;
            color: white;
        }

        .tab-content {
            display: none;
            padding: 15px 0;
        }

        .tab-content.active {
            display: block;
        }
    `);

    // 创建标签容器
    const tabContainer = document.createElement('div');
    tabContainer.className = 'tab-container';
    document.querySelector('#lineContent').parentNode.prepend(tabContainer);

    // 初始化标签系统
    function initTabs() {
        const lineItems = Array.from(document.querySelectorAll('#lineContent > li'));
        
        // 创建标签栏
        const tabBar = document.createElement('div');
        tabBar.className = 'tab-buttons';
        
        // 创建内容区
        const contentWrapper = document.createElement('div');
        
        lineItems.forEach((lineItem, index) => {
            // 创建标签按钮
            const tabBtn = document.createElement('div');
            tabBtn.className = `tab-button ${index === 0 ? 'active' : ''}`;
            tabBtn.textContent = lineItem.querySelector('.line-name').textContent;
            
            // 创建对应内容区
            const tabContent = lineItem.cloneNode(true);
            tabContent.className = 'tab-content';
            if(index === 0) tabContent.classList.add('active');
            
            // 绑定切换事件
            tabBtn.addEventListener('click', () => {
                document.querySelectorAll('.tab-button, .tab-content').forEach(el => {
                    el.classList.remove('active');
                });
                tabBtn.classList.add('active');
                tabContent.classList.add('active');
                tabBar.scrollTo({
                    left: tabBtn.offsetLeft - 100,
                    behavior: 'smooth'
                });
            });
            
            // 保留原有播放功能
            tabContent.querySelectorAll('[name="lineData"]').forEach(item => {
                item.addEventListener('click', (e) => {
                    e.target.classList.add('active');
                    e.target.parentNode.querySelectorAll('.active').forEach(el => {
                        if(el !== e.target) el.classList.remove('active');
                    });
                });
            });
            
            tabBar.appendChild(tabBtn);
            contentWrapper.appendChild(tabContent);
        });
        
        tabContainer.append(tabBar, contentWrapper);
    }
    
    // 初始执行
    initTabs();
    
    // 监听动态加载
    new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if(mutation.addedNodes.length) {
                tabContainer.remove();
                initTabs();
            }
        });
    }).observe(document.querySelector('#lineContent'), {childList: true});
})();